src/mock/diaryComment.json (1)

1-23: 목 데이터의 댓글 내용 다양화 필요.

이미지 파일(/images/1.jpg, /images/2.jpg, /images/3.jpg)은 실제로 public/images/ 디렉토리에 존재합니다. 그러나 댓글 내용이 모두 "코코넛 커피도 마셔주세요"로 동일하며 숫자만 추가된 형태입니다. 더 현실적인 테스트를 위해 댓글 내용을 다양하게 작성하는 것을 권장합니다.

src/assets/SendButton.tsx (1)

9-16: 접근성 개선 제안: disabled 상태 추가

현재 hasText가 false일 때 cursor-pointer만 제거하고 버튼은 여전히 클릭 가능합니다. MessageInput.tsx에서 가드 처리하고 있지만, 더 나은 접근성과 의미론을 위해 hasText가 false일 때 버튼에 disabled 속성을 추가하는 것을 고려해보세요.

🔎 제안하는 개선 방안

 export const SendButton = ({ hasText = false, onClick }: SendButtonProps) => {
   return (
     <button
       className="absolute top-1 right-4 rotate-[-23deg] px-[2px] py-[3px]"
       onClick={onClick}
+      disabled={!hasText}
     >
       <SendIcon
-        className={`text-neutral-04 h-[18px] w-[20px] ${hasText ? "cursor-pointer" : ""}`}
+        className={`h-[18px] w-[20px] ${hasText ? "text-neutral-04 cursor-pointer" : "text-neutral-07"}`}
       />
     </button>
   );
 };

src/components/dailyRecord/MissionFeed.tsx (2)

42-47: 접근성 개선 필요: 클릭 가능한 div에 키보드 접근성이 없습니다.

현재 div에 onClick만 있어 키보드 사용자가 접근할 수 없습니다. 접근성을 위해 role, tabIndex, onKeyDown 추가를 권장합니다.

🔎 접근성 개선 제안

-            <div
-              className="bg-neutral-11 flex h-[88px] w-[88px] items-center justify-center rounded-full"
-              onClick={() => router.push("/day-story/upload")}
-            >
+            <div
+              role="button"
+              tabIndex={0}
+              className="bg-neutral-11 flex h-[88px] w-[88px] items-center justify-center rounded-full"
+              onClick={() => router.push("/day-story/upload")}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  router.push("/day-story/upload");
+                }
+              }}
+            >

---

11-11: 하드코딩된 MY_ID 관련 참고사항.

MY_ID가 컴포넌트 내부에 하드코딩되어 있습니다. TODO 주석(Line 16)에서 언급된 대로 API 연결 시 인증 상태 관리(zustand 등)에서 가져오도록 개선이 필요합니다.

src/app/day-story/upload/page.tsx (1)

8-8: 레이아웃 안정성을 위해 min-height 추가 고려.

bg-black 배경이 뷰포트 전체를 채우도록 min-h-screen을 추가하면 콘텐츠가 적을 때도 일관된 레이아웃을 유지할 수 있습니다.

🔎 제안된 수정

-    <main className="w-full bg-black">
+    <main className="min-h-screen w-full bg-black">

src/app/shared-diary/[id]/comment/page.tsx (1)

1-1: 파일명과 컴포넌트명 불일치 참고.

SharedDiaryChat.tsx 파일에서 SharedDiaryComment를 export하고 있어 명명 규칙에 일관성이 없습니다. 유지보수성을 위해 파일명을 SharedDiaryComment.tsx로 변경하거나, export 이름을 파일명과 맞추는 것을 고려해 보세요.

src/components/dailyRecord/MissionInfo.tsx (1)

29-31: 접근성 개선 필요: 클릭 가능한 div에 키보드 접근성이 없습니다.

MissionFeed.tsx와 동일하게, 클릭 가능한 영역에 키보드 접근성을 추가하는 것이 좋습니다.

🔎 접근성 개선 제안

         <div
-          className="flex h-[76px] cursor-pointer items-center justify-between p-[10px]"
+          role="button"
+          tabIndex={0}
+          className="flex h-[76px] cursor-pointer items-center justify-between p-[10px]"
           onClick={() => router.push("/day-story/upload")}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              router.push("/day-story/upload");
+            }
+          }}
         >

src/constants/missionCard.ts (1)

4-4: subtitle 타입 일관성 개선 고려.

NOT_STARTED.subtitle은 함수이고 다른 상태는 문자열이라 소비 측에서 typeof 체크가 필요합니다. 모두 함수로 통일하거나, 별도 필드로 분리하면 타입 안정성이 향상됩니다.

🔎 타입 일관성 개선 예시

// 옵션 1: 모든 subtitle을 함수로 통일
export const MISSION_STATUS = {
  NOT_STARTED: {
    title: "하루한컷 미션 도착!",
    subtitle: (localday: string) => `${localday}요일`,
    buttonText: "시작하기",
  },
  IMAGE_UPLOADED: {
    title: "하루한컷 미션을 공유할까요?",
    subtitle: () => "확인을 누르면 미션이 완료돼요",
    buttonText: "완료하기",
  },
  IMAGE_CONFIRMED: {
    title: "미션이 완료되었어요",
    subtitle: () => "소중한 오늘의 한컷을 기록했어요",
    buttonText: "확인",
  },
} as const;

src/components/dailyPhoto/DailyMissionCard.tsx (2)

10-11: 사용되지 않는 상태 setter를 확인하세요.

setStatus가 선언되었지만 컴포넌트 내에서 사용되지 않고 있습니다. 향후 미션 상태 변경 기능을 구현할 예정이라면 TODO 코멘트를 추가하거나, 현재 사용하지 않는다면 상태 관리를 제거하고 const status = "NOT_STARTED"로 단순화하는 것을 고려해보세요.

---

34-38: 버튼에 이벤트 핸들러 추가를 고려하세요.

버튼이 cursor-pointer 스타일을 가지고 있지만 onClick 핸들러가 없습니다. 향후 작업에서 버튼 클릭 시 상태 변경 또는 페이지 이동 등의 기능을 추가할 예정이라면, TODO 주석을 남겨두는 것이 좋습니다.

src/components/dailyPhoto/DailyMissionProgress.tsx (1)

15-15: 하드코딩된 값을 동적 데이터로 교체할 계획을 확인하세요.

isTodayCompleted가 현재 false로 하드코딩되어 있습니다. 향후 실제 미션 완료 상태를 반영하도록 props로 전달받거나 API에서 가져오는 방식으로 개선이 필요합니다. PR 설명의 "추후 작업" 섹션에 이 내용이 포함되어 있는지 확인해주세요.

src/components/dailyRecord/SharedDiaryChat.tsx (2)

5-6: React 훅 임포트를 하나로 통합할 수 있습니다.

가독성을 위해 useState와 useEffect를 한 줄로 임포트하는 것을 권장합니다.

🔎 제안하는 수정

-import { useState } from "react";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";

---

85-96: 새 댓글 ID 생성 방식을 개선하는 것을 고려하세요.

Date.now()를 ID로 사용하는 것은 임시 솔루션으로는 적절하지만, 실제 API 연동 시 서버에서 생성된 ID를 사용하도록 리팩토링이 필요합니다. 또한 MyProfile 데이터의 존재 여부를 검증하는 것도 고려해보세요.

💡 참고사항

현재는 로컬 상태에만 댓글이 추가되므로, 추후 API 연동 시 다음을 고려하세요:

• 서버에서 반환된 ID 사용
• 낙관적 업데이트(optimistic update) 패턴 적용
• 에러 처리 및 롤백 로직

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Learnt from: lemoncurdyogurt
Repo: IT-Cotato/12th-SimTok-FE PR: 3
File: src/utils/formatPhone.ts:6-9
Timestamp: 2026-01-02T13:08:01.441Z
Learning: In phone number formatting/validation logic, enforce that Korean numbers are valid only as 10-digit landlines or 11-digit mobile numbers starting with 010. Do not perform strict intermediate-length formatting for 7–9 digits during input; assume intermediate values are not considered valid until they reach 10 or 11 digits. Implement or update validation to accept only 10 or 11 digits (with 010 prefix for mobiles) and, if formatting is needed during input, preserve user-friendly partial handling without emitting strict validation errors for intermediate states.

src/components/dailyRecord/SharedDiaryChat.tsx (2)

5-6: React import 통합 권장

useState와 useEffect를 별도 줄에서 import하고 있습니다. 하나의 import 문으로 통합하면 코드가 더 간결해집니다.

♻️ 제안된 수정

-import { useState } from "react";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";

---

60-65: 접근성 개선: onClick을 button에 배치

onClick 핸들러가 CloseIcon SVG에 있으나, 접근성을 위해 <button> 요소에 배치해야 합니다. 키보드 사용자와 스크린 리더가 버튼을 올바르게 인식하고 상호작용할 수 있습니다.

♻️ 제안된 수정

-          <button className="h-[14px] w-[14px] cursor-pointer">
-            <CloseIcon
-              onClick={() => router.back()}
-              className="h-[14px] w-[14px] text-black"
-            />
+          <button
+            className="h-[14px] w-[14px] cursor-pointer"
+            onClick={() => router.back()}
+            aria-label="닫기"
+          >
+            <CloseIcon className="h-[14px] w-[14px] text-black" />
           </button>

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/utils/uploadImage.util.ts (1)

31-34: URL.createObjectURL로 생성된 URL의 메모리 해제가 필요합니다.

URL.createObjectURL로 생성된 Blob URL은 URL.revokeObjectURL로 해제하지 않으면 메모리 누수가 발생할 수 있습니다. cleanup 함수를 반환하거나, 사용처에서 해제 책임이 있음을 문서화하는 것을 권장합니다.

♻️ cleanup 함수를 포함한 개선안

 export interface UploadImageResult {
   file: File;
   previewUrl: string;
+  revokePreview: () => void;
 }

 export const uploadImage = (
   file: File,
   options: UploadImageOptions = {},
 ): UploadImageResult => {
   // ... validation logic ...

+  const previewUrl = URL.createObjectURL(file);
   return {
     file,
-    previewUrl: URL.createObjectURL(file),
+    previewUrl,
+    revokePreview: () => URL.revokeObjectURL(previewUrl),
   };
 };

src/utils/getCurrentDay.ts (1)

10-10: DayStatus 타입을 export하는 것을 고려해주세요.

getWeekDayStatus 함수의 반환 타입인 DayStatus가 내부 타입으로 선언되어 있어, 소비자 측에서 타입을 직접 사용하기 어렵습니다.

♻️ 타입 export 제안

-type DayStatus = "past" | "today" | "future";
+export type DayStatus = "past" | "today" | "future";

src/constants/missionCard.ts (1)

19-28: MISSION_SORT에도 as const를 추가하는 것을 권장합니다.

MISSION_STATUS는 as const로 선언되어 있지만, MISSION_SORT는 그렇지 않아 타입 추론에 일관성이 없습니다.

♻️ as const 추가

 export const MISSION_SORT = [
   { sort: "food", icon: "/images/missionIcon/food.svg" },
   {
     sort: "plant",
     icon: "/images/missionIcon/plant.svg",
   },
   { sort: "color", icon: "/images/missionIcon/color.svg" },
   { sort: "time", icon: "/images/missionIcon/time.svg" },
   { sort: "tv", icon: "/images/missionIcon/tv.svg" },
-];
+] as const;

src/components/dailyPhoto/DailyMissionCard.tsx (2)

85-85: == 대신 ===를 사용하세요.

느슨한 동등 비교(==) 대신 엄격한 동등 비교(===)를 사용하는 것이 권장됩니다.

♻️ 수정 제안

-          className={`${status == "NOT_STARTED" ? "bg-gradient-orange" : "bg-mint-01"} ...`}
+          className={`${status === "NOT_STARTED" ? "bg-gradient-orange" : "bg-mint-01"} ...`}

---

68-68: 중복 border 클래스 제거

border border-[4px]에서 border 클래스가 중복됩니다. border-[4px]만으로 충분합니다.

♻️ 수정 제안

-          className={`h-27 w-27 overflow-hidden rounded-full ${status === "IMAGE_CONFIRMED" ? "border border-[4px] border-white shadow-[0_0_12px_-1px_#00C362]" : ""}`}
+          className={`h-27 w-27 overflow-hidden rounded-full ${status === "IMAGE_CONFIRMED" ? "border-[4px] border-white shadow-[0_0_12px_-1px_#00C362]" : ""}`}

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Learnt from: lemoncurdyogurt
Repo: IT-Cotato/12th-SimTok-FE PR: 3
File: src/utils/formatPhone.ts:6-9
Timestamp: 2026-01-02T13:08:01.441Z
Learning: In phone number formatting/validation logic, enforce that Korean numbers are valid only as 10-digit landlines or 11-digit mobile numbers starting with 010. Do not perform strict intermediate-length formatting for 7–9 digits during input; assume intermediate values are not considered valid until they reach 10 or 11 digits. Implement or update validation to accept only 10 or 11 digits (with 010 prefix for mobiles) and, if formatting is needed during input, preserve user-friendly partial handling without emitting strict validation errors for intermediate states.

src/app/day-story/upload/page.tsx (2)

10-22: 컴포넌트 구조가 잘 구성되어 있습니다.

상태 관리와 컴포넌트 구성이 깔끔하게 되어 있습니다. 몇 가지 개선 사항을 제안드립니다:

1. main 요소에 min-h-screen을 추가하면 다양한 화면 크기에서 레이아웃이 더 안정적으로 유지됩니다.
2. mt-[143px]와 같은 매직 넘버는 상수로 추출하거나 주석을 달아두면 유지보수성이 향상됩니다.

♻️ 제안된 개선 사항

 const DayStoryUpload = () => {
   const [status, setStatus] =
     useState<keyof typeof MISSION_STATUS>("NOT_STARTED");
   return (
-    <main className="w-full bg-black">
+    <main className="min-h-screen w-full bg-black">
       <BackHeader title="하루한컷" titleColor="white" />
       <DailyMissionProgress status={status} />
-      <div className="mt-[143px] flex items-center justify-center">
+      {/* BackHeader(63px) + DailyMissionProgress(90px) 이후 중앙 정렬을 위한 여백 */}
+      <div className="mt-[143px] flex items-center justify-center">
         <DailyMissionCard status={status} setStatus={setStatus} />
       </div>
     </main>
   );
 };

---

15-15: 조건부 클래스 맵핑으로 동적 Tailwind 클래스 패턴 개선

BackHeader 컴포넌트에서 text-${titleColor} 형태의 동적 클래스를 사용하고 있습니다. Tailwind CSS는 빌드 시점에 정적 분석을 수행하므로 동적으로 생성된 클래스명은 일반적으로 문제가 될 수 있습니다.

다만, 현재 코드베이스에서 text-white와 text-black이 다른 컴포넌트들에서 정적으로 사용되고 있어 실제 스타일 적용에는 문제가 없습니다. 그러나 유지보수성과 명확성을 위해 다음과 같이 수정을 권장합니다:

const titleColorClass = {
  white: "text-white",
  black: "text-black"
}[titleColor] || "text-black";

<BackIcon className={`${titleColorClass} h-6 w-6`} />

이렇게 하면 Tailwind가 명시적으로 클래스명을 인식하고, 향후 새로운 색상이 추가될 때도 보다 안전합니다.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/constants/missionCard.ts (1)

19-28: as const assertion 추가로 타입 안정성 강화

MISSION_STATUS와 달리 MISSION_SORT에는 as const assertion이 없습니다. 타입 추론의 일관성을 위해 추가하는 것을 권장합니다. 아이콘 경로는 모두 정상적으로 존재합니다.

♻️ 제안된 수정

 export const MISSION_SORT = [
   { sort: "food", icon: "/images/missionIcon/food.svg" },
   {
     sort: "plant",
     icon: "/images/missionIcon/plant.svg",
   },
   { sort: "color", icon: "/images/missionIcon/color.svg" },
   { sort: "time", icon: "/images/missionIcon/time.svg" },
   { sort: "tv", icon: "/images/missionIcon/tv.svg" },
-];
+] as const;

src/app/day-story/upload/page.tsx (1)

14-15: 동적 Tailwind 클래스 구성 및 레이아웃 개선 권장

BackHeader에서 titleColor prop을 통해 동적으로 클래스를 구성하고 있습니다 (text-${titleColor}). 비록 text-white와 text-black이 코드베이스의 다른 곳에서 정적으로 사용되어 번들에 포함될 가능성이 높지만, 동적 클래스 구성은 유지보수성과 가독성 측면에서 모범 사례가 아닙니다. 가능하면 props나 조건부 로직으로 직접 클래스명을 결정하는 것을 권장합니다.

또한 main 요소에 min-h-screen을 추가하여 전체 뷰포트 높이를 확보하는 것이 레이아웃 안정성을 높일 수 있습니다.

♻️ 레이아웃 개선 제안

-    <main className="w-full bg-black">
+    <main className="min-h-screen w-full bg-black">

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

src/components/dailyPhoto/DailyMissionCard.tsx (2)

90-90: 엄격한 동등 연산자를 사용하세요.

== 대신 ===를 사용하여 타입 안전성을 보장하세요. 이전 리뷰에서도 지적된 사항입니다.

---

26-26: Blob URL 메모리 누수 방지를 위한 cleanup effect가 필요합니다.

컴포넌트 언마운트 시 또는 previewUrl 변경 시 이전 Blob URL을 해제하지 않으면 메모리 누수가 발생합니다. 이전 리뷰에서도 지적된 사항입니다.

🐛 cleanup effect 추가

+import { useState, useEffect } from "react";
-import { useState } from "react";

 export const DailyMissionCard = ({
   status,
   setStatus,
 }: DailyMissionCardProps) => {
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);

+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);

src/components/dailyRecord/SharedDiaryChat.tsx (1)

26-27: NaN 검증이 불완전합니다.

현재 코드는 id가 undefined인 경우만 처리하고, "abc"와 같은 유효하지 않은 문자열은 처리하지 않습니다. Number("abc")는 NaN을 반환하며, NaN !== null은 true이므로 Line 84-85의 조건을 통과하여 /shared-diary/NaN/comment로 잘못된 네비게이션이 발생할 수 있습니다.

🐛 제안된 수정

  const { id } = useParams<{ id: string }>();
-  const numericId = id ? Number(id) : null;
+  const numericId = id && !Number.isNaN(Number(id)) ? Number(id) : null;

src/utils/getMissionSubtitle.ts (1)

4-15: todayIndex에 대한 유효성 검사가 누락되었습니다.

todayIndex가 유효 범위(0-6)를 벗어나면 WEEK_DAYS_KOR[todayIndex]가 undefined를 반환하여 "undefined요일" 같은 잘못된 문자열이 생성될 수 있습니다.

♻️ 제안된 수정

 export const getMissionSubtitle = (
   status: keyof typeof MISSION_STATUS,
   todayIndex: number,
 ) => {
+  if (todayIndex < 0 || todayIndex > 6 || Number.isNaN(todayIndex)) {
+    throw new Error(`Invalid todayIndex: ${todayIndex}`);
+  }
   const currentDay = WEEK_DAYS_KOR[todayIndex];
   const rawSubtitle = MISSION_STATUS[status].subtitle;
   const text =
     typeof rawSubtitle === "function"
       ? `${rawSubtitle(currentDay)}요일`
       : rawSubtitle;
   return text;
 };

src/components/dailyPhoto/DailyMissionCard.tsx (2)

8-8: 사용되지 않는 import입니다.

WEEK_DAYS_KOR는 이 파일에서 직접 사용되지 않습니다. getMissionSubtitle 유틸리티가 내부적으로 처리하므로 제거해주세요.

🧹 제안된 수정

-import { WEEK_DAYS_KOR } from "@/constants/weekDays";

---

71-71: 중복된 Tailwind 클래스입니다.

border-[4px]가 이미 border를 정의하므로 border는 불필요합니다.

🧹 제안된 수정

-          className={`h-27 w-27 overflow-hidden rounded-full ${status === "IMAGE_CONFIRMED" ? "border border-[4px] border-white shadow-[0_0_12px_-1px_#00C362]" : ""}`}
+          className={`h-27 w-27 overflow-hidden rounded-full ${status === "IMAGE_CONFIRMED" ? "border-[4px] border-white shadow-[0_0_12px_-1px_#00C362]" : ""}`}

src/components/dailyRecord/SharedDiaryChat.tsx (2)

5-6: React 훅 import를 하나로 통합하세요.

useState와 useEffect를 별도 import 문으로 분리할 필요가 없습니다.

♻️ 제안된 수정

-import { useState } from "react";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";

---

70-72: 하단 고정 footer와 겹치는 padding 값을 확인하세요.

pb-[109px]이 하드코딩되어 있는데, 이 값이 Line 74의 footer 높이와 동기화되어 있는지 확인이 필요합니다. Footer 높이가 변경되면 컨텐츠가 가려지거나 불필요한 공백이 생길 수 있습니다.

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Learnt from: lemoncurdyogurt
Repo: IT-Cotato/12th-SimTok-FE PR: 3
File: src/utils/formatPhone.ts:6-9
Timestamp: 2026-01-02T13:08:01.441Z
Learning: In phone number formatting/validation logic, enforce that Korean numbers are valid only as 10-digit landlines or 11-digit mobile numbers starting with 010. Do not perform strict intermediate-length formatting for 7–9 digits during input; assume intermediate values are not considered valid until they reach 10 or 11 digits. Implement or update validation to accept only 10 or 11 digits (with 010 prefix for mobiles) and, if formatting is needed during input, preserve user-friendly partial handling without emitting strict validation errors for intermediate states.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}